<template>
  <Layout>
    <div class="about-page">This is about page</div>
    <div class="content">
      <button @click="inc">inc</button>
      <span>{{ example.id }}</span>
      <button @click="dec">dec</button>
    </div>
    <button @click="goHome">Home &lt;=</button>
  </Layout>
</template>

<script lang="ts">
import { SingleExample } from 'model';
import { defineComponent, ref } from 'vue';
import Layout from '@/layout/index.vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'About',
  components: {
    Layout,
  },
  setup() {
    const example = ref<SingleExample>({
      name: 'hello',
      id: 0,
    });
    const inc = () => {
      example.value.id += 1;
    };
    const dec = () => {
      example.value.id -= 1;
    };
    const router = useRouter();
    const goHome = () => {
      router.push({
        name: 'Home',
      });
    };
    return {
      example,
      inc,
      dec,
      goHome,
    };
  },
});
</script>

<style scoped lang="scss">
</style>
